<template>
  <div>
    <h2>深入v-model</h2>

    <input type="text" v-model="msg">
    <span>{{ msg }}</span>
    <br>
<!--    <CustomInput :value="msg"  @input="msg=$event"></CustomInput>-->
    <CustomInput v-model="msg"></CustomInput>
<!--
第一步:  父组件中:value="msg"本质上是props通信 将msg的值传递给子组件使用
第二步:  父组件中@input="msg=$event" 本质上是绑定自定义事件,接收子组件内部传递的数据
第三步:父组件接收子组件传递的新数据,把数据修改成新数据
第四步:父组件修改为新数据后 新数据再次传递给子组件 子组件数据改变
父组件中<CustomInput :value="msg"  @input="msg=$event"></CustomInput>
子组件中<input type="text" :value="value" @input="$emit('input',$event.target.value)">
最终实现父子数据同步
el-input 使用的就是父子同步的原理
我们以后使用的el-input可以认为是使用原生的input但是原理不一样
 -->
    <el-input v-model="msg"></el-input>
    <br>
  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    data() {
      return {
        msg:'小猪佩奇'
      }
    },
    components: {
      CustomInput
    }
  }
</script>
